<template>
  <div id="app">
   <transition name="medial" mode="out-in">
    <keep-alive :max="3">
      <component :is="coms[currentIndex]" />
    </keep-alive>
   </transition>
   <div class="tabbar">
    <span :class="{active:currentIndex==index}" v-for="(item,index) in btns" :key="index" @click="currentIndex=index">{{item}}</span>
   </div>
  </div>
</template>

<script>
import Home from './components/Home.vue'
import Mine from './components/Mine.vue'
import order from './components/Order.vue'


export default {
  data() {
    return {
      coms: [Home, Mine, order],
      btns: ['首页', '订单', '我的'],
      currentIndex: 0,
      lists:[]
  }
  },
  
 
}
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
}

.tabbar {
  display: flex;
  justify-content: space-around;
  align-content: center;
  padding: 10px 0;
  position: fixed;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  border-top: 1px solid #ccc;
}

.tabbar .active {
  color: lightskyblue;
}
//入场动画
.medial-enter{//开始
opacity: 0;
transform: calc(0) rotate(180deg);
}
.medial-enter-active{//过度
transition: all 0.7S;
}
.medial-enter-to{
opacity: 1;
transform: calc(1) rotate(0deg);
}
//离场动画
.medial-leave {
  //开始
opacity: 1;
transform: calc(2) rotate(0deg);
}

.medial-leave-active {
  //过度
transition: all .3S;
}

.medial-leave-to {
opacity: 0;
transform: calc(0) rotate(180deg);
}
</style>